<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :title="title"
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="1050px"
  >
    <el-form
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :inline="true"
      :disabled="isDisabled"
      label-width="110px"
    >
      <!-- <el-form-item :label="$t('eqpType')" prop="eqpType">
        <el-select v-model="form.eqpType" clearable filterable @change="eqpTypeChange">
          <el-option
            v-for="item in eqpTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t('eqpName')" prop="eqpName">
        <el-input v-model="form.eqpName" :disabled="eqpnamedisable" style="width: 200px;" />
      </el-form-item>
      <!-- <el-form-item :label="$t('eqpModel')" prop="eqpModel">
        <el-select v-model="form.eqpModel" clearable filterable @change="eqpModelChange">
          <el-option
            v-for="item in fromeqpmodellist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item :label="$t('eqpBrand')" prop="vendor">
        <el-input v-model="form.vendor" :disabled="true" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpfacility')" prop="facility">
        <el-input v-model="form.facility" :disabled="true" style="width: 200px;" />
      </el-form-item>
      <el-form-item v-show="form.eqpType =='TESTER'" :label="$t('eqpheadids')" prop="headId">
        <el-input v-model="form.headId" :placeholder="$t('separates')" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpemGroup')" prop="emGroup">
        <el-select v-model="form.emGroup" clearable filterable>
          <el-option
            v-for="item in emGroupList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqpserialNo')" prop="serialNo">
        <el-input v-model="form.serialNo" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpassetNo')" prop="assetNo">
        <el-input v-model="form.assetNo" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpinTime')" prop="inTime">
        <el-date-picker
          v-model="form.inTime"
          :disabled="intimedisable"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 200px;"
        />
      </el-form-item>
      <el-form-item :label="$t('eqpancillaryAssetNo')" prop="ancillaryAssetNo">
        <el-input v-model="form.ancillaryAssetNo" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpbuyoffTime')" prop="buyoffTime">
        <el-date-picker
          v-model="form.buyoffTime"
          :disabled="buyofftimedisable"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 200px;"
        />
      </el-form-item>
      <el-form-item :label="$t('eqpassetAllocate')" prop="assetAllocate">
        <el-select v-model="form.assetAllocate" clearable filterable>
          <el-option
            v-for="item in assetAllocateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqpbuyoffBy')" prop="buyoffBy">
        <el-input v-model="form.buyoffBy" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpwarrantyDate')" prop="warrantyDate">
        <el-date-picker
          v-model="form.warrantyDate"
          :disabled="warrantydatedisable"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 200px;"
        />
      </el-form-item>
      <el-form-item :label="$t('eqpspecialFeature')" prop="specialFeature">
        <el-input v-model="form.specialFeature" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpsystemType')" prop="systemType">
        <el-select v-model="form.systemType" clearable filterable>
          <el-option
            v-for="item in systemTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqpstatus')" prop="status">
        <el-select v-model="form.status" clearable >
          <el-option :label="$t('Invalidation')" :value="0"/>
          <el-option :label="$t('effective')" :value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqplocation')" prop="location">
        <el-select v-model="form.location" clearable filterable>
          <el-option
            v-for="item in locationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item :label="$t('eqpstation1IP')" prop="station1IP">
        <el-input v-model="form.station1IP" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpstation1Code')" prop="station1Code">
        <el-input v-model="form.station1Code" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpstation2IP')" prop="station2IP">
        <el-input v-model="form.station2IP" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpstation2Code')" prop="station2Code">
        <el-input v-model="form.station2Code" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpstation3IP')" prop="station3IP">
        <el-input v-model="form.station3IP" style="width: 200px;" />
      </el-form-item>
      <el-form-item :label="$t('eqpstation3Code')" prop="station3Code">
        <el-input v-model="form.station3Code" style="width: 200px;" />
      </el-form-item> -->
      <el-form-item v-show="showsite" :label="$t('eqpfullSiteQty')" prop="fullSiteQty">
        <el-select v-model="form.fullSiteQty" clearable filterable>
          <el-option
            v-for="item in fullSiteQtylist"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqpactiveControl')" prop="activeControl">
        <el-select v-model="form.activeControl" clearable >
          <el-option :value="0" label="NO"/>
          <el-option :value="1" label="YES"/>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqpowenrId')" prop="owenrId">
        <el-select v-model="form.owenrId" clearable filterable>
          <el-option
            v-for="item in owenrIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('eqptesterConfig')" prop="testerConfig">
        <el-input v-model="form.testerConfig" />
      </el-form-item>
      <el-form-item :label="$t('description')" prop="description">
        <el-input v-model="form.description" type="textarea" style="width:300px;"/>
      </el-form-item>
    </el-form>
    <div v-if="!isDisabled" slot="footer" class="dialog-footer">
      <el-button type="primary" icon="el-icon-receiving" @click="doSave('ruleForm')">{{ $t('save') }}</el-button>
      <el-button icon="el-icon-delete" @click="resetForm('ruleForm')">{{ $t('reset') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import crudJob from '@/api/equipment/eqpbase'
import selectJob from '@/api/system/attributes'
import { getAllUsers } from '@/api/system/user'
import mySetting from '@/mixins/mySetting'
export default {
  name: 'MyDialog',
  mixins: [mySetting],
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      fromeqpmodellist: [],
      eqpTypeList: [],
      eqpNameList: [],
      eqpModelList: [],
      eqpBrandList: [],
      facilityList: [],
      emGroupList: [],
      assetAllocateList: [],
      systemTypeList: [],
      locationList: [],
      owenrIdList: [],
      fullSiteQtylist: [],
      showsite: true,
      showhead: false,
      eqpnamedisable: false,
      intimedisable: false,
      buyofftimedisable: false,
      warrantydatedisable: false,
      rules: {
        eqpType: [
          { required: true, message: this.$t('eqptyperequired'), trigger: 'blur' }
        ],
        eqpName: [
          { required: true, message: this.$t('eqpnamerequired'), trigger: 'blur' }
        ],
        eqpModel: [
          { required: true, message: this.$t('eqpmodelrequired'), trigger: 'blur' }
        ],
        emGroup: [
          { required: true, message: this.$t('emGrouprequired'), trigger: 'blur' }
        ],
        serialNo: [
          { required: true, message: this.$t('serialNorequired'), trigger: 'blur' }
        ],
        assetNo: [{ required: true, message: this.$t('assetNorequired'), trigger: 'blur' }],
        assetAllocate: [
          { required: true, message: this.$t('assetAllocaterequired'), trigger: 'blur' }
        ],
        status: [
          { required: true, message: this.$t('statusrequired'), trigger: 'blur' }
        ],
        activeControl: [
          { required: true, message: this.$t('activeControlrequired'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    crudJob.eqptypelist().then(res => {
      this.eqpTypeList = res.data
    })

    crudJob.eqpnamelist().then(res => {
      this.eqpNameList = res.data
    })

    crudJob.eqpmodellist('').then(res => {
      this.eqpModelList = res.data
    })

    crudJob.eqpbrandlist().then(res => {
      this.eqpBrandList = res.data
    })

    crudJob.facilitylist().then(res => {
      this.facilityList = res.data
    })

    selectJob.selectitemlist({ name: 'EQP_EMGroupList' }).then(res => {
      this.emGroupList = res.data
    })

    selectJob.selectitemlist({ name: 'EQP_AssetalList' }).then(res => {
      this.assetAllocateList = res.data
    })

    selectJob.selectitemlist({ name: 'EQP_SystemtypeList' }).then(res => {
      this.systemTypeList = res.data
    })

    selectJob.selectitemlist({ name: 'EQP_LocationList' }).then(res => {
      this.locationList = res.data
    })

    getAllUsers().then(res => {
      this.owenrIdList = res.data
    })

    selectJob.selectitemlist({ name: 'EQP_fullSiteQtylist' }).then(res => {
      this.fullSiteQtylist = res.data
    })
  },
  methods: {
    // 新增数据
    doSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }
        if (this.form.id) {
          // 存在id则是更新
          crudJob.edit({ id: this.form.id, ...this.form }).then(res => {
            this.doMerge(res)
          })
        } else {
          // 不存在id则是新增
          crudJob.add(this.form).then(res => {
            this.doMerge(res)
          })
        }
      })
    },
    // 重置dialog表单信息
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    // 打开弹窗
    openDialog(val) {
      this.dialogFormVisible = true
      if (val === 1) { // 新增
        this.eqpnamedisable = false
        this.intimedisable = false
        this.buyofftimedisable = false
        this.warrantydatedisable = false
      } else if (val === 2) { // 修改
        this.eqpnamedisable = true
        this.intimedisable = true
        this.buyofftimedisable = true
        this.warrantydatedisable = true
      } else { // 查看
        // 全部不可用

      }
    },
    // 关闭弹窗
    closeDialog() {
      this.$emit('closeDialog')
      this.dialogFormVisible = false
    },
    eqpTypeChange(val) {
      crudJob.eqpmodellist({ eqptype: val })
        .then(res => {
          this.fromeqpmodellist = res.data
        })

      if (val === 'ROTARY' || val === 'HANDLER') {
        this.showsite = true
      } else {
        this.showsite = false
        this.form.fullSiteQty = 0
      }
      if (val === 'TESTER') {
        this.showhead = true
      }
    },
    eqpModelChange(val) {
      crudJob.geteqpmodel({ eqptype: this.form.eqpType, eqpmodel: val })
        .then(res => {
          if (res.data != null) {
            this.$set(this.form, this.form.vendor, res.data.vendor)
            this.$set(this.form, this.form.facility, res.data.facility)
            this.form.vendor = res.data.vendor
            this.form.facility = res.data.facility
          }
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.el-form-item {
    margin-bottom: 10px;
}
</style>
